//我的订单 点开的详情页
import React, { useEffect, useState } from 'react'
// import { StyleSheet, TouchableOpacity, View, Image, ScrollView, Dimensions } from 'react-native';
import { Button, StyleSheet, TouchableOpacity, View, Image, Modal, ScrollView, Dimensions, ImageBackground } from 'react-native';
import { Entypo } from '@expo/vector-icons';
import { AntDesign } from '@expo/vector-icons';
import { Divider } from '@rneui/themed';
import { Text, Card, Icon, ButtonGroup } from '@rneui/themed';
import { getAddress, getOrder, getOrderById } from '../../api/order';
// import { Button, Modal } from 'antd-mobile-rn';
import axios from '../../api/axios';
import { useAuth, baseURL } from '../../context/AuthProvider';
const add = (m) => { return m < 10 ? '0' + m : m }
//将时间戳转为普通格式
const fortime = (shijianchuo) => {
    var time = new Date(shijianchuo);
    var y = time.getFullYear();
    var m = time.getMonth() + 1;
    var d = time.getDate();
    var h = time.getHours();
    var mm = time.getMinutes();
    var s = time.getSeconds();
    return y + '-' + add(m) + '-' + add(d) + ' ' + add(h) + ':' + add(mm) + ':' + add(s);
}
const Btn = ({ children, style, color, ...rest }) => {
    return (
        <TouchableOpacity {...rest} style={
            {
                justifyContent: 'center',
                alignItems: 'center',
                ...style
            }
        }>
            <Text style={{ color: color ? color : '#fff' }}>{children}</Text>
        </TouchableOpacity>
    )
}
//route是跳转传入的参数
const BillInfo = ({ navigation, route }) => {
    const { navigate } = navigation;
    //外键查询存储用户地址
    const [address, setAddress] = useState({});
    const [list, setList] = useState([]);
    //create time
    const [itemTime, setItemTime] = useState('');
    const [visible, setVisible] = useState(false)
    const orderid = route.params.orderid;
    const state = route.params.state
    const uri = route.params.img
    const arr = ["待发货", "待收货", "待评价", "已完成"]
    const { user } = useAuth()
    useEffect(() => {
        console.log(state, '传过来的');
        //加载成功后自动根据route通过axios获取值并放入item
        axios.post('/order/single/id', { orderid: orderid })
            .then(res => {
                console.log(5555555);
                console.log(res.data);
                setList(res.data);
                // setItemTime(new Date(res.data.start_date));
                // console.log(res.data.addressid);
            })
    }, [])
    const confirm = () => {
        axios.post('/order/confirm', { orderid: list[0].orderid, state: state }).then(res => {
            console.log(res);
            if (res.code == 200) {
                axios.post('/order/single', { state: 1, userid: user.userid })
                    .then(res => {
                        // AsyncStorage.setItem('1list', JSON.stringify(res.data))
                        setVisible(false)
                        navigation.navigate('paylist', { userid: user.userid, state: 0 })
                    })
                axios.post('/order/single', { state: 2, userid: user.userid })
                    .then(res => {
                        // AsyncStorage.setItem('2list', JSON.stringify(res.data))
                        setVisible(false)
                        navigation.navigate('paylist', { userid: user.userid, state: 0 })
                    })

            }
        })

    }
    const footerButtons = [
        { text: 'Cancel', onPress: () => console.log('cancel') },
        { text: 'Ok', onPress: () => console.log('ok') },
    ]
    return <ScrollView>
        <View >
            <Modal
                animationType="slide"
                transparent={true}
                visible={visible}
                onRequestClose={() => {
                    Alert.alert("Modal has been closed.");
                    setVisible(!visible);
                }}
                footer={footerButtons}
            >
                <ImageBackground style={{ width: '100%', height: '100%', backgroundColor: '#00000099', justifyContent: 'center' }}>
                    <View style={styles.modalView}>
                        <Text style={{ margin: 10 }}>是否确认收货？</Text>
                        <View style={{ flexDirection: 'row', width: '50%', alignItems: 'center', justifyContent: 'space-between' }}>
                            <Button title='取消' style={{ marginRight: 5 }} onPress={() => setVisible(false)}></Button>
                            <Button title='确认' style={{ margin: 15 }} onPress={confirm}></Button>
                        </View>
                    </View>
                </ImageBackground>
            </Modal>
            {
                list.map(item => {
                    return <Card key={item.orderid}>
                        <Card.Title>{arr[state]}</Card.Title>
                        <View style={{ flexDirection: 'row' }}>
                            <Text>收货地址：</Text>
                            <Text style={{ marginBottom: 10, width: '80%', left: 15 }}>{item.address}</Text>
                        </View>
                        <View style={{ flexDirection: 'row' }}>
                            <Text>联系电话：</Text>
                            <Text style={{ marginBottom: 10, width: '80%', left: 15 }}>{item.phone}</Text>
                        </View>
                        <View style={{ flexDirection: 'row' }}>
                            <Text>创建时间：</Text>
                            <Text style={{ marginBottom: 10, width: '80%', left: 15 }}>
                                {fortime(item.start_date)}
                            </Text>
                        </View>
                        <View style={{ flexDirection: 'row' }}>
                            <Text>订单编号：</Text>
                            <Text style={{ marginBottom: 10, width: '80%', left: 15 }}>
                                {item.ordernum}
                            </Text>
                        </View>
                        <View style={{ flexDirection: 'row' }}>
                            <Image source={{ uri: baseURL + uri }} style={{ width: 80, height: 80 }}></Image>
                            <View style={{ marginBottom: 10, width: '80%', left: 15 }}>
                                <Text style={{ width: '100%' }}>
                                    {item.com_name}
                                </Text>
                                <View style={{ flexDirection: 'row', justifyContent: 'flex-end', alignItems: 'center', right: 5 }}>
                                    <Text style={{ color: 'gray', fontSize: 12 }}>
                                        {item.com_price} × {item.comnum} =
                                    </Text>
                                    <Text style={{ color: '#df5916', fontSize: 16 }}>
                                        {item.sumprice}
                                    </Text>
                                </View>
                            </View>
                        </View>
                        {state == 1 && <View>
                            <Text>    </Text>
                            <Button title='确认收货' style={{ height: 20, marginTop: 50 }} onPress={() => setVisible(true)}>确认收货</Button>
                        </View>}
                        {state == 2 && <View>
                            <Text>    </Text>
                            <Button title='评价' style={{ height: 20, marginTop: 50 }} onPress={() => navigation.navigate('evalu', { commodityid: item.commodityid, orderid: item.orderid })}></Button>
                        </View>}
                        {state == 3 && <View style={{alignItems:'flex-end'}}>
                            <Btn 
                                style={{ height: 20, marginTop: 16,marginRight:5 }}
                                onPress={() => navigation.navigate('evaluation',{ commodityid: item.commodityid })}
                                color={'grey'}
                                >查看评价{'>'}</Btn>
                        </View>}
                        <Card.Divider style={{ top: 10 }} />
                    </Card>
                })
            }

        </View>
    </ScrollView>

}

const styles = StyleSheet.create({
    container: {
        flex: 1,
    },
    fonts: {
        marginBottom: 8,
    },
    user: {
        flexDirection: 'row',
        marginBottom: 6,
    },
    image: {
        width: 30,
        height: 30,
        marginRight: 10,
    },
    name: {
        fontSize: 16,
        marginTop: 5,
    },
    centeredView: {
        flex: 1,
        justifyContent: "center",
        alignItems: "center",
        marginTop: 22
    },
    modalView: {
        margin: 50,
        backgroundColor: "white",
        borderRadius: 20,
        padding: 35,
        alignItems: "center",
        shadowColor: "#000",
        shadowOffset: {
            width: 0,
            height: 2
        },
        shadowOpacity: 0.25,
        shadowRadius: 3.84,
        elevation: 5,
        justifyContent: 'center'
        // opacity: 1
    },
    openButton: {
        backgroundColor: "#F194FF",
        borderRadius: 20,
        padding: 10,
        elevation: 2
    },
    textStyle: {
        color: "white",
        fontWeight: "bold",
        textAlign: "center"
    },
    modalText: {
        marginBottom: 15,
        textAlign: "center"
    }
});

export default BillInfo;